<template>
    <div class="gnerv-login">
        <div class="gnerv-login-info">
            <div class="gnerv-login-msg">

            </div>
            <div class="gnerv-login-form">
                <el-tabs
                        value="basic"
                        @tab-click="handleTabClick"
                        type="border-card" style="margin: 0 auto; width: 320px" stretch>
                    <el-tab-pane label="账户登陆" name="basic">
                        <el-form :model="loginForm">
                            <el-form-item>
                                <el-input ref="account" v-model="loginForm.account" type="text" placeholder="account"
                                          @keyup.enter.native="handleLogin"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="loginForm.password" type="password" placeholder="password"
                                          @keyup.enter.native="handleLogin"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 100%" type="primary" @click="handleLogin"
                                           @keyup.enter.native="handleLogin">登录
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="手机登陆" name="phone">
                        <el-form :model="loginForm">
                            <el-form-item>
                                <el-input ref="account" v-model="loginForm.number" type="text" placeholder="account"
                                          @keyup.enter.native="handleLogin">
                                    <el-button slot="append" @click="handleCode">发送验证码</el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="loginForm.code" type="text" placeholder="短信验证码"
                                          @keyup.enter.native="handleLogin">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 100%" type="primary" @click="handleLogin"
                                           @keyup.enter.native="handleLogin">登录
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="二维码" name="qrcode">
                        <center>
                            <el-image style="width: 200px; height: 200px;"
                                      fit="fit"></el-image>
                        </center>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>

    import {getCode, userLogin} from "../../api/manage/login"

    import router from '../../router'
    import MessageUtils from "../../utils/MessageUtils";

    export default {
        name: "Login",
        data() {
            return {
                type: "",
                loginForm: {
                    loginType: 'basic',
                    account: 'admin',
                    password: '123',
                    number: '15858585858',
                    code: ""
                },
                newLoginForm: {},
                kaptchaUrl: ""
            }
        },
        methods: {
            handleLogin() {
                userLogin(this.loginForm).then(response => {
                    if (response.code == 200) {
                        let isAuthorization = this.$route.query.isAuthorization;
                        if(isAuthorization == "authorization"){
                            let item = sessionStorage.getItem("clientInfo");
                            router.push({path: '/authorization', query: JSON.parse(item)})
                        }else {
                            router.push({path: '/'})
                        }
                    } else {
                        MessageUtils.showMsg("登录失败！")
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            handleTabClick(tab){
                this.loginForm.loginType = tab.name
            },
            handleCode(){
                getCode(this.loginForm.number).then(response => {
                    if (response.code == 200) {
                        this.loginForm.code = response.data.code
                    } else {
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        created() {
            this.type = this.$route.query.type
            this.$nextTick(function () {
                this.$refs.account.focus()
            })
        }
    }
</script>

<style scoped>
    .gnerv-login {
        width: 100%;
        height: 100%;
    }

    .gnerv-login-info {
        margin: 0 auto;
        position: relative;
        top: 130px;
        width: 700px;
        height: 450px;
        border: #ffffff solid 1px;
        background-color: #2c3e50;
    }

    .gnerv-login-msg {
        display: block;
        width: 350px;
        height: 450px;
        float: left;
        background-image: url("~@/assets/login-logo.jpg");
        float: left;
    }

    .gnerv-login-form {
        margin: 0 auto;
        padding-top: 100px;
        width: 350px;
        height: 450px;
        float: left;
    }

    @media screen and (max-width: 900px) {
        .gnerv-login-info {
            position: relative;
            top: 0;
        }
    }

    /* 配置了涉猎器宽度不大于901px时 abc 显现200px宽度 */

    @media screen and (max-width: 500px) {
        .gnerv-login-info {
            width: 350px;
            position: relative;
            top: 0;
        }

        .gnerv-login-msg {
            display: none;
        }
    }

</style>